<template>
  <div>
    <el-card class="box-card">
      <!-- 添加数据按钮 -->
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-bottom: 20px"
        size="medium"
        :disabled="!category3Id"
        @click="toShowSpuForm"
        >添加SPU</el-button
      >

      <!-- 数据列表展示-表格 -->
      <el-table :data="spuList" border style="width: 100%; margin-bottom: 20px">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="spuName" label="SPU名称" align="center">
        </el-table-column>
        <el-table-column prop="description" label="SPU描述" align="center">
        </el-table-column>

        <el-table-column label="SPU操作" align="center">
          <template slot-scope="{ row, $index }">
            <!-- 添加sku -->
            <el-tooltip effect="dark" content="添加SKU" placement="top">
              <el-button
                icon="el-icon-plus"
                type="primary"
                size="small"
                @click="toAddSkuInfo(row)"
              ></el-button>
            </el-tooltip>
            <!-- 编辑spu -->
            <el-tooltip effect="dark" content="编辑SPU" placement="top">
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="small"
                title="修改spu"
                @click="toEditSpuInfo(row)"
              />
            </el-tooltip>
            <!-- 查看sku -->
            <el-tooltip
              effect="dark"
              content="查看SKU"
              placement="top"
              class="box-item"
            >
              <el-button
                icon="el-icon-warning"
                type="info"
                size="small"
                @click="toCheckSkuList(row)"
              />
            </el-tooltip>
            <!-- 删除功能 -->
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              class="box-item"
            >
              <el-popconfirm
                :title="`确定删除${row.spuName}吗？`"
                @onConfirm="toDeleteSpuInfo(row, $index)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  title="删除spu"
                  style="margin-left: 10px"
                ></el-button>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
      />

      <!-- 弹出对话框,查看sku -->
      <el-dialog
        title="sku列表"
        :visible.sync="dialogTableVisible"
        :before-close="handleBeforeClose"
      >
        <el-table :data="skuList">
          <el-table-column
            property="skuName"
            label="名称"
            width="150"
          ></el-table-column>
          <el-table-column
            property="price"
            label="价格（元）"
            width="200"
          ></el-table-column>
          <el-table-column
            property="weight"
            label="重量（KG）"
          ></el-table-column>
          <el-table-column property="skuDefaultImg" label="默认图片">
            <template slot-scope="{ row, $index }">
              <img :src="row.skuDefaultImg" style="width: 80px" />
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="dialogTableVisible = false"
          >返回</el-button
        >
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  reqGetSpuListData,
  reqDeleteSpuInfo,
  reqCheckSkuListData,
} from "@/api/product/spu";
import { mapState, mapActions } from "vuex";

export default {
  name: "SpuList",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      spuList: [],
      skuList: [],
      dialogTableVisible: false,
      isShowSkuForm: false,
      isShowSpuForm: false,
      isShowList: true,
    };
  },
  //挂载完毕就调用，获取品牌数据
  // mounted() {
  //   console.log(this.category3Id);
  //   // this.getSpuListData();
  // },
  methods: {
    // 弹出框-关闭dialog之前，清空数据
    handleBeforeClose() {
      this.skuList = [];
      this.dialogTableVisible = false;
    },
    // 1. 获取spuList数据列表
    async getSpuListData() {
      const result = await this.$API.spu.reqGetSpuListData(
        this.currentPage,
        this.pageSize,
        this.category3Id
      );
      //console.log("aaaa", result);
      this.spuList = result.data.records;
      this.total = result.data.total;
    },

    // 2. 修改每页显示的数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1; //修改后默认跳转到第一页
      this.getSpuListData();
    },

    // 3. 单击页码实现切换页面效果
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getSpuListData();
    },

    // 4. 点击添加SPU按钮，跳转到spuForm页面，也就是修改status的数值
    toShowSpuForm() {
      //添加新的spu商品信息和属性的时候 要全部清除上一次添加的内容
      this.$emit("getSpuInfo", {});
      this.$emit("setShowStatus", "SPU_FORM");
    },

    // 5. 添加skuFormInfo数据 把当前的spuInfo数据传过去
    async toAddSkuInfo(row) {
      // 1. 传递待编辑的spuInfo数据
      this.$emit("getSpuInfo", row);
      // 2. 切换到SkuForm页面
      this.$emit("setShowStatus", "SKU_FORM");
      //点击查看sku显示dialog
      this.dialogTableVisible = true;
      //发请求获取sku列表
      const result = await this.$API.spu.reqCheckSkuListData(row.id);
      if (result.code === 200) {
        this.skuList = result.data;
      }
    },
    // 6. 删除某一条spu
    async toDeleteSpuInfo(row, index) {
      const result = await this.$API.spu.reqDeleteSpuInfo(row.id);
      if (result.code === 200) {
        this.$message.success("删除成功");
        // 重新发送请求
        this.getSpuListData(this.spuList > 1 ? this.page : this.page - 1);
      } else {
        this.$message.error("删除失败");
      }
    },

    // 7. 点击查看SKU就可以弹出那部分sku内容
    async toCheckSkuList(row) {
      //点击查看sku显示dialog
      this.dialogTableVisible = true;
      //发请求获取sku详情数据
      const result = await this.$API.spu.reqCheckSkuListData(row.id);
      if (result.code === 200) {
        this.skuList = result.data;
      }
    },
    // 8. 点击编辑spu按钮并且数据回显
    toEditSpuInfo(row) {
      this.$emit("setShowStatus", "SPU_FORM");

      //获取子组件spuForm 获取数据
      this.$emit("getSpuInfo", row);
    },

    
  },
  computed: {
    ...mapState("categoryList", ["category1Id", "category2Id", "category3Id"]),
  },
  watch: {
    category3Id: {
      handler(newV, oldV) {
        console.log(newV, oldV);
        if (!this.category3Id) return (this.spuList = []);
        this.getSpuListData();
      },
      immediate: true, // 立刻执行
    },
  },
};
</script>

<style></style>
